<template>
    <div>
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" onClick="javascript :history.back(-1);">
            <span class="resvise_title">{{title}}</span>
        </header>
        <div class="mutlist" style="overflow-y: scroll;" :style="{ height: screen }">
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore"
                         :bottom-all-loaded="allLoaded">
                <div v-if="ifrecord ==1">
                    <div class="record_box" v-for="arr in tasks">
                        <p class="record_money" :class="{ red: arr.transaction_flow != 1 }"><span v-if="arr.transaction_type">{{ arr.transaction_type.text }}</span><i v-if="arr.transaction_flow == 1">+{{arr.transaction_amount}}</i><i v-else>-{{arr.transaction_amount}}</i>
                        </p>
                        <p class="record_title" v-if="arr.transaction_meta">{{arr.transaction_meta.meta_value}}</p>
                        <p class="record_data">{{arr.transaction_date}}</p>
                    </div>
                </div>
                <div v-else>
                    <div class="record_box" v-for="arr in tasks">
                        <p class="record_money" :class="{ red: arr.withdraw_status.val == 1 }"><span v-if="arr.withdraw_status">{{ arr.withdraw_status.text }}</span><i v-if="arr.withdraw_status.val != 1">+{{arr.withdraw_amount}}</i><i v-else>-{{arr.withdraw_amount}}</i>
                        </p>
                        <p class="record_title" v-if="arr.remark">{{arr.remark}}</p>
                        <p class="record_data">{{arr.withdraw_date}}</p>
                    </div>
                </div>
            </mt-loadmore>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Moneyrecord",
        data: () => ({
            title: '',
            ifrecord: 0,
            tasks: [],
            allLoaded: false,
            screen: 0,
            page: 1,
            url: '/capitals',
        }),
        created() {
            this.ifrecord = this.$route.params.num;
            if (this.ifrecord == 1) {
                this.title = '佣金明细';
                this.url = '/capitals';
            } else {
                this.title = '提现记录';
                this.url = '/capitals/withdrawList';
            }
            this.loadTop();
            this.screen = 17 + 'rem';
        },
        methods: {
            loadBottom() {
                api.request(this.url, 'get', {
                    status: this.status,
                    page: this.page + 1
                }).then((resp) => {
                    var arr = []
                    if (this.ifrecord == 2) {
                        arr = resp.data.data.data;
                    } else {
                        arr = resp.data.data
                    }

                    if (arr.length >= 1) {
                        this.page = this.page + 1;
                        this.tasks = this.tasks.concat(arr);
                        this.$refs.loadmore.onBottomLoaded();
                    } else {
                        this.$refs.loadmore.onBottomLoaded();
                    }

                })
            },
            loadTop() {
                api.request(this.url, 'get', {status: this.status, page: 1}).then((resp) => {
                    var arr = [];
                    console.log(this.$route.params.num)
                    if (this.ifrecord == 2) {
                        arr = resp.data.data.data;
                    } else {
                        arr = resp.data.data
                    }
                    this.tasks = [];
                    this.page = 1;
                    this.tasks = arr;
                    this.$refs.loadmore.onTopLoaded();
                })

            },
        }
    }
</script>

<style scoped="css">
    @import "../../style/moneyrecord.css";
</style>
